<template>
  <div>
    <div class="py-1 px-1 bg-white ">
      <custom-title :is-line="true" title="年度投入费用使用情况" />
      <div class="baseLoad">
        <div v-for="(item, index) in descList" :key="index">
          <div>
            <custom-details-item :icon="item.icon" :label="item.label">
              <template #valueSlot>
                <span v-if="item.label !== '附件'">{{ item.value?item.value:'/' }}</span>
                <div v-else>
                  <div v-if="item.value && item.value.length>0">
                    <el-link type="primary" @click="openAttachPopUp(item.value)">查看</el-link>
                  <!--                  <div v-for="(file,ind) in item.value" :key="file.fileUuid">-->
                  <!--                    <el-link type="primary" class="desContent" @click="handleDownLoad(file.fileUuid)">-->
                  <!--                      {{ file.fileName }}-->
                  <!--                    </el-link>-->
                  <!--                  </div>-->
                  </div>
                  <span v-else>暂无</span>
                </div>
              </template>
            </custom-details-item>
          </div>
        </div>
      </div>
      <div>
        <custom-title :is-line="true" title="企业费用使用台账" />
        <div id="searchContent" style="display: flex;justify-content: space-between">
          <div style="width: 25%;vertical-align: middle;height: 28px;" @click="showPicker = true">
            <el-input suffix-icon="el-icon-caret-bottom" :value="timeSet" readonly size="mini" />
          </div>
          <div style="vertical-align: middle;width: 74%;height: 28px;">
            <custom-timer type="date" :start.sync="formInline.startTime" :end.sync="formInline.endTime" title="" style="margin-bottom: 0" @change="getCostLedgerList" />
          </div>
        </div>
        <div v-if="listData.length > 0" class="common_list">
          <div v-for="(item, index) in listData" :key="index" class="list_item">
            <div class="content_area">
              <div class="number_order">{{ index + 1 }}</div>
              <div class="right_content">
                <div class="content_title" style="max-width: 100%">
                  {{ item.month }}
                </div>
                <ul>
                  <li v-for="(desc, ind) in tableDescList" :key="ind">
                    <i :class="'iconfont c-text-color' + (ind + 1)" v-html="desc.icon" />
                    <div class="label">{{ desc.label }}：</div>
                    <div class="value">
                      <span v-if="!desc.isFile">{{ item[desc.field] ?item[desc.field] :'/' }}</span>

                      <template v-else>
                        <el-link type="primary" @click="openAttachPopUp(item.shareAttachVos)">查看</el-link>
                      <!--                        <div v-for="(file,ind) in item.shareAttachVos" :key="file.fileUuid + ind" style="width: 100%;">-->
                      <!--                          <el-link type="primary" class="desContent c-text-primary" @click="handleDownLoad(file.fileUrl)">{{ file.fileName }}</el-link>-->
                      <!--                        </div>-->
                      </template>
                    <!-- <el-link v-else type="primary" @click="handleDownLoad(item.supportUUID)">{{ item[desc.field] }}</el-link> -->
                    </div>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
        <div v-else class="text-center text-muted my-1 baseLoad1">暂无更多数据</div>
      </div>
    </div>
    <van-popup v-model="showPicker" round position="bottom">
      <van-picker
        title="标题"
        show-toolbar
        :columns="columns"
        @confirm="onConfirm"
        @cancel="onCancel"
        @change="onChange"
      />
    </van-popup>
    <attachPopUp ref="attachPopUp" />
  </div>
</template>

<script>
import { aqCompanyInfo, getCostLedgerList } from '@/api/enterprise'
import commonList from '@/assets/mixin/commonList'
import { parseTime } from '@/utils'

export default {
  mixins: [commonList],
  data() {
    return {
      current: '',
      companyId: '',
      companyName: '',
      descList: [
        { label: '企业名称', value: '', fieldName: 'companyName', icon: '&#xe7e5;' },
        { label: '所属年份', value: '', fieldName: 'years', icon: '&#xe8d5;' },
        { label: '上年度生产收入（万元）', value: '', fieldName: 'lastIncome', icon: '&#xe69a;' },
        { label: '上年度结余（万元）', value: '', fieldName: 'lastSurplus', icon: '&#xe69a;' },
        { label: '本年度计提金额（万元）', value: '', fieldName: 'currentAmount', icon: '&#xe69a;' },
        { label: '本年度实际提取金额（万元）', value: '', fieldName: 'currentActualAmount', icon: '&#xe69a;' },
        { label: '本年度实际支出金额（万元）', value: '', fieldName: 'costCount', icon: '&#xe69a;' },
        { label: '实际支出占实际提取金额比例%', value: '', fieldName: 'amountActualCompleRate', icon: '&#xe64d;' },
        { label: '实际支出占计提金额比例%', value: '', fieldName: 'amountCompleRate', icon: '&#xe64d;' },
        { label: '本年度结余（万元）', value: '', fieldName: 'currentSurplus', icon: '&#xe69a;' },
        { label: '上报时间', value: '', fieldName: 'reportTime', icon: '&#xe685;' }
        // { label: '附件', value: '', fieldName: 'shareAttachVos', icon: '&#xe677;' }
      ],
      factoryImgList: [],
      listData: [],
      tableDescList: [
        { label: '所属年份', field: 'years', icon: '&#xe8d5;' },
        { label: '企业名称', field: 'companyName', icon: '&#xe790;' },
        { label: '投入类型', field: 'costType', icon: '&#xe634;' },
        { label: '费用说明', field: 'details', icon: '&#xe62c;' },
        { label: '支出金额（万元）', field: 'payAmount', icon: '&#xe69a;' },
        { label: '支出凭证', field: 'shareAttachVos', icon: '&#xe677;', isFile: true },
        { label: '投入时间', field: 'reportTime', icon: '&#xe685;' }
      ],
      columns: ['近一月', '近三月', '近六月', '近一年', '自定义'],
      showPicker: false,
      timeSet: '近一年',
      formInline: {
        startTime: '',
        endTime: '',
        companyId: '',
        pageNum: 1,
        pageSize: 10
      }
    }
  },
  mounted() {
    const { current, companyId } = this.$route.query
    this.formInline.companyId = this.companyId = companyId || ''
    this.current = current || ''
    this.$nextTick(() => {
      // this.companyInfoBasic()
      this.layout.showAreaLoading(['.baseLoad'])
      this.descList.map(v => {
        v.value = this.$route.query[v.fieldName] ? this.$route.query[v.fieldName] : v.value || this.$route.query[v.fieldName]
      })
      this.formInline.startTime = parseTime(new Date(new Date().getTime() - 365 * 24 * 60 * 60 * 1000), '{y}-{m}-{d}')
      this.formInline.endTime = parseTime(new Date(), '{y}-{m}-{d}')
      this.layout.hideAreaLoading(['.baseLoad'])
      this.getCostLedgerList()
    })
  },
  methods: {
    onConfirm(v) {
      const monthtTimestamp = 2592000000
      let magnification = 1
      this.timeSet = v
      switch (v) {
        case '近一月':
          magnification = 1
          break
        case '近三月':
          magnification = 3
          break
        case '近六月':
          magnification = 6
          break
      }
      if (v !== '自定义') {
        this.formInline.startTime = parseTime(new Date(new Date().getTime() - monthtTimestamp * magnification), '{y}-{m}-{d}')
        this.formInline.endTime = parseTime(new Date(), '{y}-{m}-{d}')
      } else {
        this.formInline.startTime = ''
        this.formInline.endTime = ''
      }
      this.showPicker = false
      this.getCostLedgerList()
    },
    onChange() {

    },
    onCancel() {
      this.showPicker = false
    },
    // 获取企业详情数据--基本信息
    async companyInfoBasic() {
      this.layout.showAreaLoading(['.baseLoad'])
      const { status, data } = await aqCompanyInfo({ companyId: this.companyId })
      if (status === 0 && data) {
        this.companyName = data.companyName
        this.descList.forEach((v) => {
          if (v.label === '所在地') {
            let valueTemp = ''
            v.fieldName.split(',').forEach((v) => {
              valueTemp += data[v] ? data[v] : ''
            })
            v.value = valueTemp
          } else {
            v.value = data[v.fieldName] ? data[v.fieldName] : ''
          }
        })
      }
      this.layout.hideAreaLoading(['.baseLoad'])
    },
    async getCostLedgerList() {
      this.layout.showAreaLoading(['.baseLoad1'])
      const { data, status } = await getCostLedgerList(this.formInline)
      if (data && status === 0) {
        this.listData = data.list
      }
      this.layout.hideAreaLoading(['.baseLoad1'])
    }
  }
}
</script>

<style lang="scss" scoped>
.baseLoad {
  overflow: hidden;
}
.baseLoad1 {
  overflow: hidden;
  min-height: 150px;
}
::v-deep .common_list .list_item .content_area .right_content ul li .value {
  overflow: unset;
}

::v-deep .customTimer .timer-box .van-cell {
    padding: 0 2px !important;
}
.olMap {
  width: 100%;
  height: 350px;
}
</style>
<style>
#searchContent .customTimer .timer-title{
  margin: 0;
}
</style>
